<template>
    <div class="wrap">
        <div class="head-boxs">
            <div class="box-item">
                <div class="title-box" style="background-color: rgba(205,194,194,0.7);">
                    <img style="width: 58px;height: 58px" src="../../assets/icons/capital/income.png">
                </div>
                <div class="right-content">
                    <span style="font-size: 18px">
                        {{inCome}}k
                    </span>
                    收入
                </div>
            </div>
            <div class="box-item">
                <div class="title-box" style="background-color: rgba(209,239,232,0.7);">
                    <img style="width: 42px;height: 42px" src="../../assets/icons/capital/outCome.png">
                </div>
                <div class="right-content">
                    <span style="font-size: 18px">
                        {{outCome}}k
                    </span>
                    支出
                </div>
            </div>
            <div class="box-item">
                <div class="title-box" style="background-color: rgba(203,236,228,0.7);">
                    <img style="width: 42px;height: 42px" src="../../assets/icons/capital/high.png">
                </div>
                <div class="right-content">
                    <span style="font-size: 18px">
                        {{highest}}k
                    </span>
                    单笔最高
                </div>
            </div>
        </div>
        <div class="body-main">
            <div class="left-Ranking">
                <div style="font-size: 20px;display: flex;justify-content: center;align-items: center;margin-top: 2rem;margin-bottom: 2rem">
                    <span>营收分类排行</span>
                    <img style=" width:32px;height: 32px;"
                         src="../../assets/icons/capital/paihang.png">
                </div>
                <div style="display: flex;margin-top: 1rem">
                    <div style="width: 25%;height: 100%;">
                        <div v-for="(item,index) in rankList"
                             style="height: 24px; margin-top: 32px;margin-right: 1rem"
                             :style="rankStyle(index)">
                            {{item.name}}
                        </div>
                    </div>
                    <div style="width: 80%;height: 100%">
                        <div v-for="(item,index) in rankList" style="margin-top: 2rem">
                            <el-progress :text-inside="true" :stroke-width="24"
                                         :percentage="item.rate/rankList[0].rate*100"
                                         :status="index===0?'exception':'success'"
                                         :format="format"></el-progress>
                        </div>
                    </div>
                </div>
                <div style="font-size: 20px;display: flex;justify-content: center;align-items: center;margin-top: 2rem;margin-bottom: 1rem">
                    <span>支出分类排行</span>
                    <img style=" width:32px;height: 32px;"
                         src="../../assets/icons/capital/paihang.png">
                </div>
                <div style="display: flex;margin-top: 1rem">
                    <div style="width: 25%;height: 100%;">
                        <div v-for="(item,index) in outRank"
                             style="height: 24px; margin-top: 32px;margin-right: 1rem"
                             :style="rankStyle(index)">
                            {{item.name}}
                        </div>
                    </div>
                    <div style="width: 80%;height: 100%">
                        <div v-for="(item,index) in outRank" style="margin-top: 2rem">
                            <el-progress :text-inside="true" :stroke-width="24"
                                         :percentage="(item.rate/outRank[0].rate)*100"
                                         :status="index===0?'exception':'success'"
                                         :format="outFormat"></el-progress>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <!-- 右侧饼图-->
                <div class="right-rate">
                    <div class="ve-item">
                        <div class="pick">
                            <div class="btn-back" ref="btn"></div>
                            <div class="pick-btn" @click="anim">收入</div>
                            <div class="pick-btn" @click="anim">支出</div>
                        </div>
                        <ve-ring height="250px" width="300px" :data="activeIndex===1?allCapRateRing:outCapRateRing"
                                 :settings="RingChartSettings"
                                 :extend="RingChartExtend"></ve-ring>
                        <span class="formImgTitle">{{activeIndex===1?'收入':'支出'}}占比</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getThisToDayCap} from '@/utils/apis/capital'
    import capAll from "@/dataView/capital/all/capAll";
    import btnMove from "@/utils/animations/btnMove";

    export default {
        name: "TodayCapital",
        data() {
            return {
                inCome: 0,
                outCome: 0,
                highest: 0,
                //排行榜列表
                rankList: [],
                outRank: [],
                ...capAll,
            }
        },
        created() {
            this.initData()
        },
        methods: {
            //按钮动画
            ...btnMove,
            initData() {
                getThisToDayCap().then(res => {
                    //顶部收入支出最高
                    const sumData = res.data.data
                    console.log(sumData)
                    this.highest = (sumData.max / 1000).toFixed(1)
                    let inComeList = sumData.moneyMap['收入']
                    inComeList.forEach(item => {
                        this.inCome += item.account / 1000
                    })
                    this.inCome = this.inCome.toFixed(1)
                    let outList = sumData.moneyMap['支出']
                    outList.forEach(item => {
                        this.outCome += item.account / 1000
                    })
                    this.outCome = this.outCome.toFixed(1)
                    //排行
                    this.rankList = sumData.moneyMap['收入']
                    this.outRank = sumData.moneyMap['支出']
                    //收入环图
                    this.allCapRateRing = {
                        columns: ['name', 'rate'],
                        rows: this.rankList
                    }
                    // 支出环图
                    this.outCapRateRing = {
                        columns: ['name', 'rate'],
                        rows: this.outRank
                    }
                })
            },
            rankStyle(index) {
                if (index === 0) {
                    return "{color: #f60f87;font-weight: 700;}"
                } else {
                    return "{color: #8e9aaf;}"
                }
            },
            format(percentage) {
                return percentage / 100 * this.rankList[0].account + '元'
            },
            outFormat(percentage) {
                return (percentage / 100 * this.outRank[0].account).toFixed(0) + '元'
            }
        }
    }
</script>

<style scoped>
    .head-boxs {
        margin-top: 2rem;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .box-item {
        box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 200px;
        height: 70px;
        font-size: 12px;
    }

    .box-item:hover {
        box-shadow: 1px 1px 6px rgba(30, 30, 30, 0.3);
        border-radius: 10px 10px 10px 10px;
    }

    .title-box {
        width: 35%;
        height: 100%;
        color: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px 0 0 10px;
    }

    .right-content {
        background-color: rgba(221, 231, 246, 0.32);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 65%;
        height: 100%;
        color: #363a4c;
        border-radius: 0 10px 10px 0px;
    }

    .body-main {
        width: 100%;
        display: flex;
        height: 560px;
        justify-content: space-around;
    }

    .left-Ranking {
        margin-top: 1rem;
        margin-left: 6rem;
        width: 400px;
        height: 600px;
        display: flex;
        flex-direction: column;
    }

    .right-rate {
        padding-top: 1rem;
        width: 500px;
        height: 550px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /*    选择器*/
    .pick {
        width: 160px;
        height: 40px;
        background-color: #a5beea;
        display: flex;
        border-radius: 8px;
        position: relative;
        cursor: pointer;
        box-shadow: 1px 1px 8px #3374e7 inset;
        margin-bottom: 1rem;
    }

    .pick-btn {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        z-index: 2;
        background-color: rgba(0, 0, 0, .0);
    }

    .btn-back {
        width: 50%;
        height: 100%;
        z-index: 1;
        position: absolute;
        background-color: #0b4f7b;
        border-radius: 8px;
        top: 0;
        box-shadow: 2px 2px 6px #0b4f7b;
    }

    .ve-item {
        padding-top: 1rem;
        height: 100%;
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
        box-shadow: 1px 1px 6px rgba(30, 30, 30, 0.1);
    }

    .ve-item:hover {
        box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
    }

    .formImgTitle {
        padding-bottom: 0.5rem;
        font-weight: 600;
        color: #3a75e8;
    }
</style>